<template>
  <div id="vue">
    <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
    >
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-setting"></i>
          <span>时间分布特征分析</span>
        </template>
        <el-menu-item-group>
          <!-- @click="dialogCalendarVisible = true" -->
          <el-menu-item index="1-1" @click="dialogCalendarVisible = true">日力图</el-menu-item>
          <el-popover placement="right" trigger="click">
            <div class="block">
              <el-date-picker
                v-model="value2"
                type="week"
                format="yyyy 第 WW 周"
                placeholder="选择周"
                value-format="yyyyMM"
                @blur="dialogScatterVisible = true"
              ></el-date-picker>
            </div>
            <el-menu-item index="1-2" slot="reference">单周散点图（总数）</el-menu-item>
          </el-popover>
          <el-menu-item index="1-3" @click="dialogHeatmapCartVisible = true">直角坐标系热力图（总收益）</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <el-submenu index="2">
        <template slot="title">
          <i class="el-icon-menu"></i>
          <span>空间分布特征分析</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="2-1">地理坐标热力图</el-menu-item>
          <el-menu-item index="2-2">格网热力图</el-menu-item>
          <el-menu-item index="2-3">线路热力图</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <el-submenu index="3">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>时空特征分析</span>
        </template>
        <el-menu-item-group>
          <el-popover placement="right" trigger="click">
            <div class="block">
              <el-date-picker
                v-model="value3"
                type="date"
                placeholder="选择日期"
                value-format="yyyyMMdd"
                @change="isCard=!isCard"
              ></el-date-picker>
            </div>
            <el-menu-item index="3-1" slot="reference">格网热力图</el-menu-item>
          </el-popover>
          <el-menu-item index="3-2">线路热力图</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <el-submenu index="4">
        <template slot="title">
          <i class="el-icon-document"></i>
          <span>迁移特征分析</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="4-1" @click="dialogSankeyVisible = true">桑基图</el-menu-item>
          <el-menu-item index="4-2">流向图</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
    </el-menu>

    <el-dialog title="日历图" :visible.sync="dialogCalendarVisible">
      <calendarCharts></calendarCharts>
    </el-dialog>
    <el-dialog title="单周散点图" :visible.sync="dialogScatterVisible">
      <scatterAxisCharts></scatterAxisCharts>
    </el-dialog>
    <el-dialog title="直角坐标系热力图" :visible.sync="dialogHeatmapCartVisible">
      <heatmapcartCharts></heatmapcartCharts>
    </el-dialog>
    <el-dialog title="桑基图" :visible.sync="dialogSankeyVisible">
      <sankeyCharts></sankeyCharts>
    </el-dialog>

    <el-card class="box-card" v-if="isCard">
      <div slot="header" class="clearfix">
        <span>南丁格尔玫瑰图</span>
      </div>
      <div class="card-container">
        <roseCharts></roseCharts>
      </div>
    </el-card>
  </div>
</template>

<script>
import bus from "@/bus.js";
// import Echarts from './Echarts'
import calendarCharts from "./calendarCharts";
import scatterAxisCharts from "./scatterAxisCharts";
import heatmapcartCharts from "./heatmapcartCharts";
import sankeyCharts from "./sankeyCharts";
import roseCharts from "./roseCharts";

export default {
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        }
      },
      value1: "",
      value2: "",
      value3: "",
      dialogCalendarVisible: false,
      dialogScatterVisible: false,
      dialogHeatmapCartVisible: false,
      dialogSankeyVisible: false,
      isCard: false
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    }
  },

  created() {
    bus.$on("func1", data => {
      this.loading = data;
    });
  },

  components: {
    // Echarts
    calendarCharts,
    scatterAxisCharts,
    heatmapcartCharts,
    sankeyCharts,
    roseCharts
  }
};
</script>

<style scoped>
.el-aside .el-collapse .el-collapse-item .el-collapse-item__header {
  background-color: #ffffff !important;
}

.el-dialog__wrapper {
  top: auto;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 400px;
  height: 400px;
  position: absolute;
  left: 78%;
  bottom: 4%;
  z-index: 999;
}
</style>
